import { PlusCircleOutlined } from '@ant-design/icons';
import { Tabs } from 'antd';
import React, {useEffect,useState } from 'react';
import AllList from './AllList';
import SalesTalk from './SalesTalk';
import IndustryAnal from './IndustryAnalysis';
import AddInfor from './AddInfor';
import { inject, observer } from 'mobx-react';
import './../../assets/css/knowledge/index.css'



const App = (props) => {
  const { TabPane } = Tabs;
  const [key, setKey] = useState('1');
  const OnChange = (key) => {
    setKey(key)
    console.log('key',key);
  };
  useEffect(() => {
    if (key === '1') {
      props.knowledgeStore.getAllListData({ currentPage: 1, pageSize: 20 });
    } else if (key === '2') {
      props.knowledgeStore.getSaleIndustryListData({ currentPage: 1, pageSize: 10, sort: '销售话术' })
    } else{ 
      props.knowledgeStore.getSaleIndustryListData({ currentPage: 1, pageSize: 10, sort: '行业分析' })
    }
  }, [key]);
  
  return (
    <Tabs defaultActiveKey="1" onChange={OnChange} id='konwledge'>
      <TabPane tab="全部列表" key="1">
              <AllList/>
      </TabPane>
      <TabPane tab="销售话术" key="2">
              <SalesTalk/>
      </TabPane>
      <TabPane tab="行业分析" key="3">
              <IndustryAnal/>
      </TabPane>
      <TabPane className='tab4' tab={ 
          <span>
          <PlusCircleOutlined />
            新增知识
          </span>
        } key="4">
              <AddInfor /> 
      </TabPane>
      
    </Tabs>
  );
}


export default inject('knowledgeStore')(observer(App));